import React, {Component} from 'react';
import {inject, observer} from "mobx-react";
import {Button, InputItem, WhiteSpace, WingBlank} from "antd-mobile";
import {UserPasswordStore} from "../store";

interface IUserPasswordProps {
  userPasswordStore?: UserPasswordStore | any;
}

@inject('userPasswordStore')
@observer
export default class UserPasswordForm extends Component<IUserPasswordProps, any> {

  render() {
    const {
      changeFirstPassword,
      changeConfirmPassword,
      submitBtnStatus,
      updateUserPassword,
    } = this.props.userPasswordStore;
    return (
      <>
        <InputItem
          placeholder="请输入新密码"
          onChange={changeFirstPassword}
          type="password"
          clear
          maxLength={15}
        >新密码</InputItem>

        <InputItem
          placeholder="请输入确认新密码"
          onChange={changeConfirmPassword}
          type="password"
          clear
          maxLength={15}
        >确认新密码</InputItem>

        <WhiteSpace/>

        <WingBlank>
          <Button
            type="primary"
            loading={submitBtnStatus === 3}
            onClick={updateUserPassword}
          >
            提交
          </Button>
        </WingBlank>

        <WhiteSpace/>
      </>
    );
  }

}
